<script lang="ts" setup>
import dayjs from 'dayjs'
import { computed } from 'vue'
import { DepositRefundType, AccountType } from '@/types/enum'
import { useDepositRefundStore } from '@/store/modules/depositRefund'
import { queryDepositRefundTableCol } from '@/api/expense/types/expense'
const refundStore = useDepositRefundStore()
const data = computed(() => refundStore.data)
const loading = computed(() => refundStore.loading)

const activeName = computed(() => refundStore.currentInnerTab)

const changeAccountType = computed(() => {
  return (accountType: AccountType) => {
    switch (accountType) {
      case 'Origin':
        return '原路退回'
      case 'Alipay':
        return '支付宝'
      case 'BankCard':
        return '银行卡'
      default:
        return ''
    }
  }
})
const refundstate = computed(() => {
  return (state: DepositRefundType) => {
    if (state == 'underreview') {
      return '审核中'
    } else if (state == 'refund') {
      return '退款中'
    } else if (state == 'refunded') {
      return '已退款'
    } else if (state == 'overrule') {
      return '被驳回'
    } else {
      return '其他'
    }
  }
})

const emits = defineEmits(['show-info', 'resubmit'])
/** 查看订单详情 */
const showOrderInfo = (row: queryDepositRefundTableCol) => {
  emits('show-info', row.orderId, row.userId)
}
/** 重新提交 */
const resubmit = (
  phone: string,
  orderId: string,
  orderType: string,
  userId: number,
  applyAmount: number
) => {
  emits('resubmit', phone, orderId, orderType, userId, applyAmount)
}
</script>

<template>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column type="expand">
      <template #default="props">
        <div>
          <div mb-10 mt-12 class="text-[16px] text-[#000000]">退款驳回记录</div>
          <el-table :data="props.row.refusedList" empty-text="暂无退款驳回数据" border>
            <el-table-column prop="createdTime" label="申请时间" min-width="120" sortable />
            <el-table-column prop="applyAmount" label="退款金额" />
            <el-table-column prop="accountType" label="退款渠道" />
            <el-table-column prop="accountData" label="账户信息" />
            <el-table-column prop="state" label="状态">
              <template #default="scope">
                <span class="text-[#FF0000]"> {{ refundstate(scope.row.state) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="approvalResult" label="驳回原因" />
            <el-table-column prop="approvalTime" label="驳回时间" />
            <el-table-column prop="submitter" label="退款提交人" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="mobilePhone" label="用户手机号" min-width="120" />
    <el-table-column prop="orderId" label="订单号" min-width="150" />
    <el-table-column prop="orderType" label="退款类型" min-width="120" />
    <el-table-column label="所属订单">
      <template #default="scope">
        <el-button link type="primary" @click="showOrderInfo(scope.row)">查看</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="applyAmount" label="退款金额" />
    <el-table-column prop="createdTime" label="申请时间" sortable min-width="160">
      <template #default="scope">
        <span>{{ dayjs(scope.row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="accountData" label="账户信息" min-width="150">
      <template #default="scope">
        <span v-if="scope.row.accountType === 'Alipay'"
          >{{ JSON.parse(scope.row.accountData).aliName
          }}{{ JSON.parse(scope.row.accountData).aliAccount }}</span
        >
        <span v-else-if="scope.row.accountType === 'BankCard'"
          >{{ JSON.parse(scope.row.accountData).bankName
          }}{{ JSON.parse(scope.row.accountData).bankBranchName
          }}{{ JSON.parse(scope.row.accountData).username
          }}{{ JSON.parse(scope.row.accountData).card }}</span
        >
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column prop="applyReason" label="退款原因" />
    <el-table-column prop="accountType" label="退款渠道">
      <template #default="scope">
        <span>{{ changeAccountType(scope.row.accountType) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updatedTime" label="退款时间" sortable min-width="160">
      <template #default="scope">
        <span v-if="scope.row.state == 'refunded'">
          <span>{{ dayjs(scope.row.updatedTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </span>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column prop="depositOrderId" label="退款订单号" min-width="120" />
    <el-table-column prop="state" label="状态" fixed="right">
      <template #default="scope">
        <span
          :style="{
            color:
              scope.row.state == 'refunded'
                ? '#00A870'
                : scope.row.state == 'underreview' || scope.row.state == 'refund'
                  ? 'var(--xy-warning-light-color)'
                  : '#FF0000'
          }"
        >
          {{ refundstate(scope.row.state) }}</span
        >
      </template>
    </el-table-column>
    <el-table-column prop="approvalResult" label="驳回原因" />
    <el-table-column
      prop="submitter"
      label="退款提交人"
      min-width="200"
      v-if="activeName == 'all' || activeName == 'underreview'"
    >
      <template #default="scope">
        <span v-if="scope.row.submitter == '用户'">{{ scope.row.submitter }}</span>
        <span v-else-if="scope.row.submitter !== null && scope.row.submitter !== ''"
          >客服&nbsp;&nbsp;({{ scope.row.submitter }})</span
        >
        <span v-else>{{ scope.row.submitter }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right">
      <template #default="scope">
        <el-button
          link
          type="primary"
          v-if="scope.row.state === 'overrule'"
          @click="
            resubmit(
              scope.row.mobilePhone,
              scope.row.orderId,
              scope.row.orderType,
              scope.row.userId,
              scope.row.applyAmount
            )
          "
          >重新提交</el-button
        >
        <span v-else>-</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped></style>
